<template>
  <div class="auth auth-brand">
    <div v-if="details.status !== '00100002'" class="header">
      <el-steps :active="step" align-center finish-status="success">
        <el-step title="上传商标注册资料" />
        <el-step title="等待审核" />
      </el-steps>
    </div>
    <div v-if="details.status === '00100002'" class="box box1">
      <el-form
        class="step step1"
        :model="details"
        label-width="150px"
        label-position="right"
      >
        <el-form-item class="name" label="品牌名称：">
          {{ details.brandName }}
        </el-form-item>
        <el-form-item>
          <el-form-item class="pic" label="商标注册证：" prop="trademark">
            <div class="upload-box licence fixed-margin">
              <div class="img-box">
                <el-image style="width: 100px; height: 130px" :src="qnPath(details.trademark)" :preview-src-list="srcList" fit="fill" />
              </div>
            </div>
          </el-form-item>
        </el-form-item>
      </el-form>
    </div>
    <div v-else class="box">
      <el-form
        v-show="step === 0"
        ref="form"
        class="step step1"
        :model="form"
        label-width="150px"
        label-position="right"
      >
        <el-form-item
          class="name"
          label="品牌名称："
          prop="brandName"
          :rules="[{ required: true, message: '请输入品牌名称：', trigger: 'blur' }]"
        >
          <el-input v-model="form.brandName" clearable class="ipt" placeholder="请输入品牌名称" />
        </el-form-item>
        <el-form-item>
          <el-form-item class="pic" label="商标注册证：" prop="trademark" :rules="[{ required: true, message: '请上传商标注册证图片', trigger: 'blur' }]">
            <div class="upload-box licence fixed-margin">
              <div class="img-box">
                <el-image style="width: 100px; height: 130px" :src="qnPath(form.trademark)" fit="fill" />
              </div>
              <image-upload :size="2048" imgname="商标注册证图片" tip="支持.jpg .jpeg .bmp .gif .png格式照片，大小不超过2M" @onSuccess="picSuc">
                <el-button icon="el-icon-upload2" size="small">点击上传</el-button>
              </image-upload>
            </div>
          </el-form-item>
        </el-form-item>
        <el-form-item class="fixed-margin">
          <el-button type="primary" :loading="loading" @click="submitForm">提交</el-button>
        </el-form-item>
      </el-form>
      <div v-show="step === 1" class="step step3">
        <template v-if="details.status === '00100003'">
          <h4>审核失败</h4>
          <p>很抱歉，您的诚信认证未能通过审核，拒绝原因如下：<br><span style="color:rgb(220, 82, 82)">您提交的资料不合规范，请重新提交{{ details.cause }}</span></p>
        </template>
        <template v-if="details.status === '00100001'">
          <h4>提交成功</h4>
          <p>您已您已成功提交申请品牌认证的相关信息，我们会在3个工作日内进行审核，请您耐心等待</p>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import ImageUpload from '@/components/ImagesUpload';
import { authBrand, getAuthBrand } from '@/api/user';
import { mapGetters } from 'vuex';
export default {
  name: 'ShopAuthBrand',
  components: { ImageUpload },
  data() {
    return {
      step: 0,
      loading: false,
      form: {
        brandName: '',
        trademark: 'web/public/init-main-pic.png'
      },
      details: {},
      srcList: []
    };
  },
  computed: {
    ...mapGetters(['shopInfo'])
  },
  beforeMount() {
    this.getAuthBrand();
  },
  methods: {
    submitForm() {
      const vm = this;
      vm.$refs['form'].validate((valid) => {
        if (valid) {
          vm.loading = true;
          const shopId = vm.shopInfo.id;
          const { brandName, trademark } = vm.form;
          authBrand({ shopId, brandName, trademark }).then(res => {
            vm.loading = false;
            if (res.code === '0000') {
              vm.step = 1;
            }
          }).catch(err => {
            console.log(err);
          });
        } else {
          vm.$message({
            message: '您填写的信息有错误，请检查',
            type: 'warning'
          });
        }
      });
    },
    getAuthBrand() {
      const shopId = this.shopInfo.id;
      new Promise((resolve, reject) => {
        getAuthBrand({ shopId }).then(res => {
          const { data } = res;
          if (data) {
            if (data.status === '00100001') {
              this.step = 1;
            }
            this.details = data;
            this.srcList = [this.qnPath(data.trademark)];
          }
          resolve(res);
        }).catch(err => {
          reject(err);
        });
      });
    },
    picSuc(res) {
      this.form.trademark = res;
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/styles/shop-auth.scss";
.auth-brand{
  .box{
    padding-top: 100px;
  }
  .box1{
    min-height: calc(100vh - 195px);
  }
}
</style>
